<template>
  <el-container>
    <el-aside width="200">
      <!-- 侧边栏样式 -->
      <h1 class="logo" style="height:60px;text-align=center">logo</h1>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        :collapse="false"
        :router="true"
      >
        <el-menu-item index="/Welcome">
          <i class="el-icon-menu"></i>
          <span slot="title">管理首页</span>
        </el-menu-item>

        <el-submenu index="/StudentManager/Project">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">学员管理</span>
          </template>
          <el-menu-item index="/StudentManager/Project"
            >学员项目管理</el-menu-item
          >
          <el-menu-item index="/StudentManager/Data">学员资料</el-menu-item>
          <el-menu-item index="/StudentManager/Dormitory"
            >学员宿舍</el-menu-item
          >
        </el-submenu>

        <el-menu-item index="/Attendance">
          <i class="el-icon-setting"></i>
          <span slot="title">考勤管理</span>
        </el-menu-item>

        <el-menu-item index="Statistics">
          <i class="el-icon-document"></i>
          <span slot="title">数据统计</span>
        </el-menu-item>

        <el-menu-item index="/Mine">
          <i class="el-icon-setting"></i>
          <span slot="title">我的中心</span>
        </el-menu-item>

        <el-menu-item index="/Users">
          <i class="el-icon-setting"></i>
          <span slot="title">用户中心</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部 -->
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6">
            <div class="grid-content bg-purple">1</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">千锋管理系统</div>
          </el-col>
          <el-col :span="6">
            <el-avatar
              :size="50"
              fit
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599574472029&di=437066355725ded4e27788a627041540&imgtype=0&src=http%3A%2F%2Fhbimg.huabanimg.com%2F1ab919288b0b69d1f2de2f62b124d423968d6071576f-yuNDba_fw658"
            ></el-avatar>
            <span>欢迎您：</span>
            <span class="nickname">{{ $store.state.userInfo.nickname }}</span>
            <span class="quit" @click="quit">退出</span>
          </el-col>
        </el-row>
      </el-header>
      <!-- 主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getLoginLog } from "@/api";
export default {
  mounted() {
    getLoginLog().then(res => {
      console.log(res);
    });
  },
  methods: {
    quit() {
      // 清除token
      localStorage.removeItem("qf-token");
      this.$router.push("/login");
    }
  }
};
</script>

<style>
/* 侧边栏样式 */

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-header,
.el-footer {
  background-color: rgba(77, 99, 252);
  color: #333;
  text-align: center;
  /* line-height: 60px; */
}

.el-aside {
  background-color: rgba(77, 99, 252); /* rgba(77, 99, 252)*/
  color: #333;
  text-align: center;
  /* line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 顶部样式 */

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: rgba(77, 99, 252);
}
.quit {
  cursor: pointer;
  text-decoration: underline;
  color: hotpink;
  margin: 0 20px;
}
.nickname {
  color: red;
  font-weight: bolder;
}
</style>
